<script setup>
import { useRouter } from "vue-router";    
defineProps({
    data:{
        type:Array
    },
    show:{
        type:Boolean,
        default:false
    }
})
const router=useRouter()

const JumpDetail=(id)=>{
    router.push({path:'/detail',query:{id:id}})
}
</script>
<template>
    <div>
        <div class="box_main_item" v-for="item in data" :key="item.id" @click="JumpDetail(item.id)">
            <div class="box_main_title">
                <div>{{item.course_classify_title}}</div>
            </div>
            <div class="box_main_text_detail">{{item.title}}</div>
            <div class="box_main_img_detail">
                <div class="box_main_teacher" v-for="val in item.teacher.slice(0,2)" :key="val.teacher_id">
                    <img :src="val.avatar" alt="">
                    <div>{{val.teacher_name}}</div>
                </div>
            </div>
            <div class="box_main_article_detail" v-show="!show">
                <div class="box_main_person_num"> {{item.sales_num}}人已报名</div>
                <div  :class="[item.member_price==0?'green':'red']">{{item.member_price==0?'免费':item.member_price}}</div>
            </div>
        </div>
    </div>
</template>
<style scoped>
.box_main_item{
    width: 95%;
    height: 400px;
    background-color:white;
    margin:  auto;
    margin-top: 20px;
    padding: 20px;
    box-sizing: border-box;
}
.box_main_title{
    width: 100%;
    height: 70px;
}
.box_main_title div{
    width: 20%;
    height: 50px;
    font-size: 24px;
    background-color: #f15a24;
    border-radius: 20px 0px 20px 0px;
    color: white;
    text-align: center;
    line-height: 50px;
}
.box_main_text_detail{
    width: 100%;
    height: 100px;
    font-size: 28px;
    line-height: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.box_main_img_detail{
    width: 100%;
    height: 80px;
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
}
.box_main_teacher{
    width: 25%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    margin-left:30px; 
}
.box_main_teacher img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
.box_main_article_detail{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    border-top: 1px solid #ccc;
}
.red{
    color: red;
}
.green{
    color: green;
}
</style>